<template>
    <div class="box">
        <div class="btn-box">
            <el-button type="primary" size="small" @click="$emit('addHandler')">新增</el-button>
            <el-button type="danger" size="small" 
            @click="$emit('batchDeleteHandler')"
            v-show="activeName !== 'delete'">批量删除</el-button>
            <el-button size="small" 
            @click="$emit('grounding')" 
            v-show="activeName =='all' || activeName == 'off'">上架</el-button>
            <el-button size="small" 
            @click="$emit('undercarriage')"
            v-show="activeName == 'saling' || activeName == 'all'">下架</el-button>
            <el-button size="small" type="warning" 
            @click="$emit('resumeHandler')"
            v-show="activeName === 'delete'">恢复商品</el-button>
            <el-button size="small" type="danger" 
            @click="$emit('removeDeleteHandler')"
            v-show="activeName === 'delete'">彻底删除</el-button>
        </div>
        <el-tooltip effect="dark" content="刷新" placement="bottom" >
            <el-icon class="box-item" @click="$emit('refreshHandler')">
                <Refresh />
            </el-icon>
        </el-tooltip>
    </div>
</template>
<script setup lang='ts'>

defineEmits(['refreshHandler','addHandler','grounding','undercarriage','batchDeleteHandler','resumeHandler','removeDeleteHandler'])

defineProps({
    activeName : {
        type : String
    }
})
</script>
<style scoped lang='scss'>
.box {
    width: 100%px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn-box {
        display: flex;
    }
   
}
</style>